<template>
  <view v-if="!isLogin">
    <uni-card title="用户登录">

      <uni-forms ref="form">
        <uni-forms-item label="用户名">
          <uni-easyinput v-model="userform.username" placeholder="" />
        </uni-forms-item>

        <uni-forms-item label="登录密码">
          <uni-easyinput type="password" v-model="userform.password" placeholder="" />
        </uni-forms-item>

        <uni-forms-item>
          <button type="primary" @click="login">登录</button>
        </uni-forms-item>

        <uni-forms-item>
          <button type="warn">重填</button>
        </uni-forms-item>
      </uni-forms>

    </uni-card>

  </view>
  <view v-else>
    <uni-section :title="userInfo.nickname || user.username" :sub-title="userInfo.info || '空空如也'">
      <template v-slot:decoration>
        <image @click="selectImage" class="logo" :src="userLogo" mode="aspectFit"></image>
      </template>
    </uni-section>

    <uni-section title="功能" type="line">
      <uni-list>
        <uni-list-item clickable @click="showAttachInfo" title="修改附加信息" show-arrow></uni-list-item>
        <uni-list-item :title="protable"></uni-list-item>
        <uni-list-item clickable @click="logout" title="安全退出" show-arrow></uni-list-item>
      </uni-list>
    </uni-section>
  </view>

  <!-- 修改附加信息抽屉 -->
  <uni-drawer ref="attaDrawer" type="line" :width="300">
    <uni-card title="附加信息修改">
      <view>
        <uni-forms ref="form">

          <uni-forms-item>
            <uni-easyinput v-model="attachInfo.nickname" placeholder="昵称" />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput v-model="attachInfo.qq" placeholder="QQ号" />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput v-model="attachInfo.wechat" placeholder="微信号" />
          </uni-forms-item>

          <uni-forms-item>
            <uni-easyinput type="textarea" v-model="attachInfo.info" placeholder="简介" />
          </uni-forms-item>

          <radio-group name="sex" @change="changeSex">
            <label>
              <radio :value="'n'" :checked="attachInfo.sex=='n'" />
              <text>保密</text>
            </label>
            <label>
              <radio :value="'m'" :checked="attachInfo.sex=='m'" />
              <text>男</text>
            </label>
            <label>
              <radio :value="'f'" :checked="attachInfo.sex=='f'" />
              <text>女</text>
            </label>
          </radio-group>

          <button @click="saveAttachInfo" style="margin: 1rem 0.5rem;" type="primary">保存</button>

          <!-- <view class="">
            {{ attachInfo }}
          </view> -->

        </uni-forms>
      </view>

    </uni-card>
  </uni-drawer>
</template>

<script setup>
  /* 
    作业，完成注册功能
    修改我的页面中登录之后的显示信息（添加手机和邮箱等信息显示）
  */
  import {
    ref
  } from 'vue'

  import {
    storeToRefs
  } from 'pinia'

  import {
    Api
  } from '@/js/api.js'

  import {
    useUserStore
  } from '@/stores/user.js'

  const protable = ref('默认')

  const fileinfo = ref(null)

  const uploadLogo = () => {
    Api.uploadUserLogo(fileinfo.value, (data) => {
      if (data.success) {
        uni.showToast({
          title: data.message,
          icon: 'success'
        })
        userLogo.value = userLogo.value + '?ts=' + new Date().getTime()
      } else {
        uni.showToast({
          title: data.message,
          icon: 'fail'
        })
      }
    })
  }

  // #ifndef MP-WEIXIN
  protable.value = 'H5'
  const selectImage = () => {
    fileinfo.value = null
    uni.chooseImage({
      success: (res) => {
        console.log("选择的文件信息：", res)
        if (res.tempFiles.length > 0) {
          fileinfo.value = res.tempFiles[0]
          uploadLogo()
        }
      }
    })
  }
  // #endif

  // #ifdef MP-WEIXIN
  protable.value = '微信小程序'

  const selectImage = () => {
    fileinfo.value = null
    uni.chooseMedia({
      success: (res) => {
        if (res.tempFiles.length > 0) {
          fileinfo.value = res.tempFiles[0].tempFilePath
          uploadLogo()
        }
      }
    })
  }
  // #endif

  const {
    updateUserInfo
  } = useUserStore()

  const {
    isLogin,
    user,
    userInfo,
    userLogo
  } = storeToRefs(useUserStore())

  const userform = ref({
    "username": "",
    "password": ""
  })

  const login = () => {
    uni.showLoading({
      title: '登录中。。。'
    })

    Api.post('/auth', userform.value, (data) => {
      if (data.success) {
        updateUserInfo(() => {
          uni.hideLoading()
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
        })
        return
      }
      uni.hideLoading()
      uni.showToast({
        title: data.message,
        icon: 'error'
      })
    })
  }

  const logout = () => {
    uni.showLoading({
      title: '安全退出中。。。'
    })
    Api.delete('/auth', {}, () => {
      updateUserInfo(() => {
        uni.hideLoading()
      })
    })
  }

  // 修改附加信息的部分
  const attachInfo = ref({
    "nickname": "",
    "sex": "",
    "qq": "",
    "wechat": "",
    "info": ""
  })

  const changeSex = (ev) => {
    attachInfo.value.sex = ev.detail.value
  }

  const attaDrawer = ref(null)

  const showAttachInfo = () => {
    attachInfo.value.info = userInfo.value.info
    attachInfo.value.qq = userInfo.value.qq
    attachInfo.value.wechat = userInfo.value.wechat
    attachInfo.value.sex = userInfo.value.sex
    attachInfo.value.nickname = userInfo.value.nickname

    attaDrawer.value.open()
  }

  const saveAttachInfo = () => {
    uni.showLoading({
      title: '信息保存中'
    })
    Api.put('/user/info', attachInfo.value, (data) => {
      uni.hideLoading()
      if (data.success) {
        updateUserInfo(() => {
          attaDrawer.value.close()
        })
      } else {
        uni.showToast({
          title: data.message,
          icon: 'error'
        })
      }
    })
  }
</script>

<style>
  .logo {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50%;
    display: block;
    margin-right: 1rem;
  }
</style>